<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8" />
		<title>3D旋转相册</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body,
			html {
				height: 100%;
			}
			/* 背景图片在这里设置 */
			body {
				background-image: url("26.png");
				background-size: 100% 100%;
			}
			#box {
				width: 280px;
				height: 400px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg);
				animation: go 60s linear infinite;
			}
			#box img {
				width: 280px;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
			}
			#box img:nth-child(1) {
				transform: rotateY(0deg) translateZ(0px);
			}
			#box img:nth-child(2) {
				transform: rotateY(36deg) translateZ(100px);
			}
			#box img:nth-child(3) {
				transform: rotateY(72deg) translateZ(200px);
			}
			#box img:nth-child(4) {
				transform: rotateY(108deg) translateZ(300px);
			}
			#box img:nth-child(5) {
				transform: rotateY(144deg) translateZ(400px);
			}
			#box img:nth-child(6) {
				transform: rotateY(180deg) translateZ(450px);
			}
			#box img:nth-child(7) {
				transform: rotateY(216deg) translateZ(500px);
			}
			#box img:nth-child(8) {
				transform: rotateY(252deg) translateZ(550px);
			}
			#box img:nth-child(9) {
				transform: rotateY(288deg) translateZ(600px);
			}
			#box img:nth-child(10) {
				transform: rotateY(324deg) translateZ(650px);
			}
			#box img:nth-child(11) {
				transform: rotateY(360deg) translateZ(750px);
			}
			#box img:nth-child(12) {
				transform: rotateY(396deg) translateZ(800px);
			}
			#box img:nth-child(13) {
				transform: rotateY(432deg) translateZ(850px);
			}
			#box img:nth-child(14) {
				transform: rotateY(468deg) translateZ(900px);
			}
			#box img:nth-child(15) {
				transform: rotateY(496deg) translateZ(1050px);
			}
			
			@keyframes go {
				0% {
					transform: rotateX(0deg) rotateY(0deg);
				}
				25% {
					transform: rotateX(20deg) rotateY(180deg);
				}
				50% {
					transform: rotateX(0deg) rotateY(360deg);
				}
				75% {
					transform: rotateX(-20deg) rotateY(540deg);
				}
				100% {
					transform: rotateX(0deg) rotateY(720deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="1.jpg" />
			<img src="12.png" />
			<img src="13.jpg" />
			<img src="14.jpg" />
			<img src="15.jpg" />
			<img src="16.jpeg" />
			<img src="17.jpg" />
			<img src="18.jpg" />
			<img src="19.jpg" />
			<img src="20.jpg" />
			<img src="21.jpg" />
			<img src="22.jpg" />
			<img src="23.jpg" />
			<img src="24.png" />
			<img src="25.jpg" />
		</div>
	</body>
</html>